<template>
  <div>
    <el-card shadow="hover" class="new-paper-card">
      <el-timeline>
        <el-timeline-item
          v-for="(item,i) in newPapers"
          :key="i"
          :index="item.title"
          :timestamp="item.uploadDate"
          placement="top">
          <el-card style="display: flex;flex-direction: row">
            <div style="display: inline-block">
              <el-link target="_blank" type="primary" style="font-weight: bolder; font-size: xx-large;"
                       @click="handlePaperLink(item.paperId)">上传{{item.title}}
              </el-link>
            </div>
            <div class="paper-info">作者：{{item.author}} </div>
            <div class="paper-info">上传者：{{item.uploaderName}} </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
    <el-empty  description="暂时没有论文哦" v-if="newPapers.length===0"></el-empty>
  </div>
</template>

<script>
export default {
  name: "NewPaper",
  inject:['reload'],
  data(){
    return{
      newPapers:[]
    }
  },
  methods:{
    //查看论文详情
    handlePaperLink(paperId) {
      this.$router.push({
        name: 'Details',
        params: {
          paperId:paperId,
        }
      }).then(()=>{
        this.reload()
      })
    }
  },
  mounted() {
    this.$axios.get('/paper/recent').then(res=>{
      this.newPapers=res.data.data
    }).catch(failRes=>console.log(failRes))
  }
}

</script>

<style scoped>
.paper-info{
  display: inline-block;
  margin-left: 40px;
  font-size: large;
}
/deep/ .el-timeline-item__timestamp.is-top{
  position: absolute;
  left: -117px;
  color: #333333;
}
/deep/ .el-timeline-item{
  padding-left: 150px;
}
</style>
